<template>
    <div class="recommend">
        <div class="search_header">
            <div class="searchbox">
                <el-input placeholder="歌手/歌名/拼音" v-model="input" @keyup.enter.native="enter(input)" clearable
                          focus></el-input>
                <el-button type="info" icon="el-icon-search" round size="small" @click="enter(input)">搜索</el-button>
            </div>
            <div class="recentSearch" @click="enter(recentSearchInfo)">
                上一次搜索 {{recentSearchInfo||'无'}}
            </div>
            <div class="tag-group">
                <span v-show="input==''?true:false" class="tag-group__title">热门搜索</span>
                <el-tag v-show="input==''?true:false"
                        v-for="item in hotsearch"
                        :key="item.keyword" @click="enter(item.keyword)">
                    {{ item.keyword }}
                </el-tag>
            </div>
        </div>
        <div v-show="searchShow" class="infinite-list" v-infinite-scroll="load" infinite-scroll-distance="30">
            <listitem :songsinfo="songsinfo"></listitem>
        </div>
        <!--播放器挂载到APP底部的播放栏-->
        <!--<audio ref="audio" :src="nowsongUrl" autoplay></audio>-->
        <!--<div v-show="open" ></div>-->
    </div>
</template>

<script type="text/ecmascript-6">
  import listitem from '../player/listitem.vue'

  export default {
    data() {
      return {
        page: 0,
        // 绑定输入框内容
        input: '',
        // 暂存输入框内容(防止无限滚动加载input内容----input内容需要回车后才生效)
        nowinput: '',
        // 控制搜索列表显隐
        searchShow: false,
        // 歌曲需要付费提示
        // 保存每次加载的歌曲
        songslist: [],
        // 保存已加载的所有歌曲信息
        songsinfo: [],
        //  最近搜索
        recentSearchInfo: localStorage.getItem('recentSearch') || '',
        //  防止album_audio_id当做key的大量报错
        //   id:0,
        //  热门搜索内容
        hotsearch: []

      }
    },
    created() {
      this.getHotSearch();
    },
    methods: {
      // 获取热门搜索内容
      getHotSearch() {
        this.$axios.get(this.HOSTSearch + '/api/v3/search/hot?format=json&plat=0&count=30').then(res => {
          this.hotsearch = res.data.data.info;
        })
      },
      load() {
        // 搜索页+1，每页20首歌
        this.page++;
        this.getSongInfo(this.nowinput)
      },
      // 输入框回车
      enter(content) {
        // 搜索开始清除当前歌曲列表信息
        this.songsinfo = [];
        this.page = 1;
        // nowinput用于无限滚动加载的当前搜索数据
        this.nowinput = content;
        this.input=content;
        // 上次搜索内容设置
        this.recentSearchInfo = content;
        localStorage.setItem('recentSearch', content);
        // 获取歌曲信息
        this.getSongInfo(content);
        // 输入框置空
        // this.input = '';
      },
      async getSongInfo(input) {
        this.songslist = [];
        // this.songsinfo=[];
        this.searchShow = input == '' ? false : true;   // eslint-disable-line
        await this.$axios.get(this.HOSTSearch + '/api/v3/search/song?format=json&keyword=' + input + '&page=' + this.page + '&pagesize=20&showtype=1').then(res => {
          // res.data.data.info中的歌曲hash、歌曲名filename、歌名：songname、歌手名singername、歌曲时长duration
          this.songslist = res.data.data.info
        })
        if (this.songslist) {
          this.songslist.forEach((item, index) => {
            this.$axios.get(this.HOST + '/app/i/getSongInfo.php?cmd=playInfo&hash=' + item.hash).then(res => {
              // console.log(res.data.album_audio_id)
              // console.log(this.songslist[index].filename)
              // console.log(res.data.albumid)
              // 多加一条ERROR:需要付费，无法播放；songsinfo包含filename:歌手-歌曲名，url：歌曲地址，id:绑定key的索引，imgUrl:歌曲歌手图片(需要去掉网址中包含的"/{size}"),歌手名，歌曲名，播放时长timeLength
              this.songsinfo.push({
                'hash': item.hash,
                'error': res.data.error,
                'filename': res.data.fileName,
                'url': res.data.url,
                'id': res.data.album_audio_id,
                'imgUrl': res.data.imgUrl.replace('/{size}', ''),
                'singername': res.data.choricSinger,
                'songname': res.data.songName,
                'timeLength': res.data.timeLength
              })
            })
          })
        }


      }
    },
    components: {
      listitem
    }
  }
</script>

<style scoped>
    .search_header {
        position: fixed;
        margin-bottom: 3rem;
        background-color: #000;
        width: 100%
    }

    .searchbox {
        display: flex;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .el-input {
        margin-right: 1rem;
    }

    .recommend {
        /*position: fixed*/
        width: 100%;
        bottom: 0;
        padding-bottom: 3rem;
    }

    .infinite-list {
        padding-top: 3rem;

        height: 100vh;
        overflow: scroll;
    }

    .infinite-list-item {
        height: 20px;
        background-color: pink;
    }

</style>
